<!--
 * @Author: your name
 * @Date: 2021-04-05 19:54:57
 * @LastEditTime: 2021-06-01 00:24:19
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \workspace\projects\xmly\src\app\app.component.html
-->
<div id="xm">
  
    <app-header (login)="showLogin = true"></app-header>
    <div class="content">
        <div class="container"> 
            <div class="breadcrumb-wrap">
                <app-breadcrumb>
                    <app-breadcrumb-item>全部分类</app-breadcrumb-item>
                    <app-breadcrumb-item>
                        <div class="sub-category">
                            <div class="handler">
                                <span class="current">{{currentCategory?.displayName}}</span>
                                <i class="arrow"></i>
                            </div>
                            <div class="category-box">
                                <ul>
                                    <li (click)="changeCategory(item)" [class.checked]="item.id === currentCategory?.id"
                                        *ngFor="let item of categories;">{{item.displayName}}</li>
                                </ul>
                            </div>
                        </div>
                    </app-breadcrumb-item>
                    <ng-container *ngIf="subcategory.length">
                        <app-breadcrumb-item *ngFor="let item of subcategory">{{ item }}</app-breadcrumb-item>
                    </ng-container>
                </app-breadcrumb>
            </div>
            <router-outlet></router-outlet>
        </div>
        <!-- <div class="container">
            <div class="breadcrumb">
                <app-breadcrumb [xmSeparator]="mySeparator">
                    <app-breadcrumb-item>全部</app-breadcrumb-item>
                    <app-breadcrumb-item>一级</app-breadcrumb-item>
                    <app-breadcrumb-item>二级</app-breadcrumb-item>
                    <ng-template #mySeparator let-name let-my="my">
                        <b>&***&</b> 
                    </ng-template>
                </app-breadcrumb>
            </div>
        </div> -->
    </div>
    
</div>
<app-login [show]="showLogin" (hide)="showLogin=false"></app-login>
<!-- <div appDrag class="test-box">
    <div class="sec">sec</div>
    <div class="sec sec2" >
        <p appDragHandler [limitInWindow]="true">sec2</p>
    </div>
    <div class="sec sec3" appDragHandler>sec3</div> 
</div> --> 
<app-player 
    [trackList]="playerInfo.trackList"
    [album]="playerInfo.album"
    [currentTrack]="playerInfo.currentTrack"
    [currentIndex]="playerInfo.currentIndex"
    [playing]="playerInfo.playing"
    (closed)="closedPlayer()"
    *ngIf="showPlayer"
    @fadePlayer></app-player>

    <app-back-top></app-back-top>

   